<template>
    <div >
    <el-button type="success" size="mini" class="el-icon-plus" style="height:30px;margin-top:5px;margin-left:10px" round @click="addClick()">增加</el-button>
    <draggable v-model="list_arr" :options="dragOptions" @end="onEnd" >
      <transition-group tag="div" id="doing1" class="item-ul-d" style="    align-items: flex-start;">
    <div class=" "  v-for="(item,index) in list" :key="index" style="position: relative;border:1px solid #DCDFE6;margin-bottom:10px;padding:10px;">
     
        <!-- <div v-for="(item,index) in list" :key="index" style="border-bottom:1px solid #e0e0e0"> -->
            <div class="flex">
                <div style="line-height:40px;margin-right:5px">标题</div>
                <el-input v-model="item.title" style="width:100px;margin-right:5px" placeholder="请输入标题" />
                 <div style="line-height:40px;margin-right:5px">路径</div>
                <el-select v-model="item.path" placeholder="请选择" style="margin-right:5px">
                    <el-option
                    v-for="value in path_options"
                    :key="value.value"
                    :label="value.title"
                    :value="value.value">
                    </el-option>
                </el-select>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(index)"></el-button>
            </div>

            <div class="flex" style="margin-top:10px;width:83%" >
                <div style="line-height:40px;margin-right:5px">标题颜色</div>
                <el-color-picker v-model="item.title_color" style="margin-right:5px"></el-color-picker>
                <div style="line-height:40px;margin-right:5px">选中颜色</div>
                <el-color-picker v-model="item.check_color" style="margin-right:5px"></el-color-picker>

                <el-switch v-model="item.big" active-color="#13ce66" inactive-color="#ff4949" style="margin-top:10px;margin-right:5px" @change="change(index)"></el-switch>
                <div style="line-height:40px;margin-right:5px">使用大图标</div>
                <!-- 选择框 -->
                 
            </div>

            <template v-if="item.big">
            <el-form-item label="大图标圆角" label-width="130px" prop="title">
               <el-slider :min="0" :max="50" input-size="mini" v-model="item.img_radius" show-input />
            </el-form-item>
            <el-form-item label="大图标大小" label-width="130px" prop="title">
               <el-slider :min="40" :max="100" input-size="mini" v-model="item.img_size" show-input />
            </el-form-item>
            </template>

             <el-radio-group v-model="item.is_thumb" type="success" size="small" round>
                    <el-radio-button v-for="(op,i) in ['图标','图片']" :key="i" :label="i">{{op}}</el-radio-button>
                  </el-radio-group>
            <template v-if="item.is_thumb==1">
            <div class="flex switch_right1">
                <div style="line-height:40px;margin-right:5px">图片</div>
                <upload-pic :thumb="item.thumb" @update:thumb="onThumb($event,'thumb',index)" width="60" height="60" cate_id="1"/>
                <div style="line-height:40px;margin-right:5px">选中图片</div>
                <upload-pic :thumb="item.thumb_check" @update:thumb="onThumb($event,'thumb_check',index)" width="60" height="60" cate_id="1"/>
            </div>
            </template>
            <icon-browser :icon="item.icon" @onChange="item.icon=$event" v-else />
 
        </div>
        </transition-group>
    </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import iconBrowser from '@/components/tool/iconBrowser'
    export default {
        components: { draggable,iconBrowser},
        props:['list','options'],
        name: 'SettingBottom',
        data(){
            return{
                dragOptions:{
                    animation: 120,
                    scroll: true,
                    group: 'sortlist',
                    ghostClass: 'ghost-style'
                },
                list_arr:[],
                path_options:[
                    {title:'首页',value:'index'},
                    {title:'分类',value:'classfiy'},
                    {title:'购物车',value:'shopcar'},
                    {title:'我的',value:'member'},
                    {title:'消息',value:'messages'},
                    {title:'视频',value:'cuShortVideo'},
                    {title:'文章',value:'cuEssay'},
                    {title:'直播',value:'cuLive'},
                ]
            }
        },
        mounted() {
            this.list_arr=this.list
        },
        methods:{
            change(index){
                if(this.list[index].big){
                    this.$set(this.list[index],'is_thumb',1)
                if(this.list[index].img_radius==undefined){
                    this.$set(this.list[index],'img_radius',50)
                }
                if(this.list[index].img_size==undefined){
                    this.$set(this.list[index],'img_size',50)
                }
                }
            },
            onThumb(url,field,index){
                this.$set(this.list[index],field,url)
            },
            del(i){
                this.$msg_confirm().then((e) => {
                    this.$delete(this.list,i)
                });
            },
            addClick(){
                if(this.list.length>0){
                    this.list.unshift(JSON.parse(JSON.stringify(this.list[0])))
                }else{
                    this.list.unshift({big:false,title:'首页',icon:'iconfont icon-icon_huabanfuben',path:'index',is_thumb:0})
                }
            },
            //拖拽结束事件
            onEnd() {
                for(let i in this.list_arr){
                this.$set(this.list,i,this.list_arr[i])
                }
            },
            selectIcon(event,field) {
                console.log(field)
                console.log(event.currentTarget.className)
                this.list[field] = event.currentTarget.className
            },
        }
	
    }
</script>

<style >
.flex{
  display: flex;
  flex-wrap: wrap;
}
.switch_right1{
    margin-left: 20px;
    margin-bottom: 10px;
}
/* .switch_right1 div{
    margin-right: 5px;
} */
</style>
